<template>
<div class="top-bar">

    <h1 class="title">
        {{title}}
    </h1>
    
    <div class="control">
        
        <div class="item" v-for='(item, index) in control' :key='index' @tap='item.fn'>
            <i-icon :type='item.type' :size='item.size' :color='item.color' ></i-icon>
        </div>
        
        <slot></slot>

    </div>
    
</div>
</template>

<script>
export default {
    props: [ "title", 'control'],

    data: function() {	
        return {}
    },

    methods: {}
}
</script>

<style scoped lang='less'>

.top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3*@interval;
    background: @mainColor;
    color: #fff;

    .control{
        display: flex;
        justify-content: right;
        align-items: center;
    }

    .item{
        margin-left: 4*@interval;
    }
}

</style>